<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`core-drawer-panel` contains a drawer panel and a main panel.  The drawer
and the main panel are side-by-side with drawer on the left.  When browser
window size is smaller than the `responsiveWidth`, `core-drawer-panel` 
changes to narrow layout.  In narrow layout, the drawer will be stacked on top
of the main panel.  The drawer will be slided in/out to hide/reveal the main
panel.

Use the attribute `drawer` to indicate the element is a drawer panel and
`main` to indicate is a main panel.

Example:

    <core-drawer-panel>
      <div drawer> Drawer panel... </div>
      <div main> Main panel... </div>
    </core-drawer-panel>

@group Polymer Core Elements
@element core-drawer-panel
@homepage github.io
-->

<link rel="import" href="../core-media-query/core-media-query.html">
<link rel="import" href="../core-selector/core-selector.html">

<polymer-element name="core-drawer-panel">
<template>

  <link rel="stylesheet" href="core-drawer-panel.css">

  <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>

  <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition} | tokenList }}" valueattr="id" selected="{{selected}}">

    <div id="main" >
      <content select="[main]"></content>
      <div id="scrim" on-tap="{{togglePanel}}"></div>
    </div>
    
    <div id="drawer">
      <content select="[drawer]"></content>
    </div>

  </core-selector>

</template>
<script>

  Polymer('core-drawer-panel', {
    /**
     * Fired when the narrow layout changes.
     * 
     * @event core-responsive-change
     * @param {Object} detail
     * @param {boolean} detail.narrow true if the panel is in narrow layout.
     */

    publish: {
      /**
       * Max-width when the panel changes to narrow layout.
       *
       * @attribute responsiveWidth
       * @type string
       * @default '640px'
       */
      responsiveWidth: '640px',
      
      /**
       * The panel that is being selected. `drawer` for the drawer panel and
       * `main` for the main panel.
       *
       * @attribute selected
       * @type string
       * @default null
       */
      selected: {value: null, reflect: true},
      
      /**
       * The panel to be selected when `core-drawer-panel` changes to narrow 
       * layout.
       *
       * @attribute defaultSelected
       * @type string
       * @default 'main'
       */
      defaultSelected: 'main',
    
      /**
       * Returns true if the panel is in narrow layout.  This is useful if you
       * need to show/hide elements based on the layout.
       *
       * @attribute narrow
       * @type boolean
       * @default false
       */
      narrow: {value: false, reflect: true}
    },
    
    transition: false,
    
    domReady: function() {
      // to avoid transition at the beginning e.g. page loads
      // NOTE: domReady is already raf delayed and delaying another frame
      // ensures a layout has occurred.
      this.async(function() {
        this.transition = true;
      });
    },

    togglePanel: function() {
      this.selected = this.selected === 'main' ? 'drawer' : 'main';
    },
    
    openDrawer: function() {
      this.selected = 'drawer';
    },
    
    closeDrawer: function() {
      this.selected = 'main';
    },

    queryMatchesChanged: function() {
      if (this.queryMatches) {
        this.selected = this.defaultSelected;
      }
      this.narrow = this.queryMatches;
      this.fire('core-responsive-change', {narrow: this.narrow});
    }

  });

</script>
</polymer-element>
